<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_Ajax-网络请求使用</title>
  <!-- 
  在 jQuery 中，Ajax（异步 JavaScript 和 XML）是一种用于与服务器进行异步通信的技术。通过 Ajax，开发者可以在不重新加载整个页面的情况下，向服务器发送请求并接收响应。
  一、jQuery Ajax 方法
   1.  `$.ajax()` 
  `$.ajax()`  是 jQuery 中最基本的 Ajax 方法，提供了丰富的选项来配置请求。
  语法
  $.ajax({
      url: '请求的 URL',
      type: '请求方法', // 'GET' 或 'POST'
      data: { key: 'value' }, // 发送到服务器的数据
      dataType: '数据类型', // 期望的响应数据类型，例如 'json', 'xml', 'html', 'text'
      success: function(response) {
          // 请求成功时的回调函数
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // 请求失败时的回调函数
      },
      complete: function(jqXHR, textStatus) {
          // 请求完成时的回调函数（无论成功或失败）
      }
  });
  示例
  $.ajax({
      url: 'https://api.example.com/data',
      type: 'GET',
      dataType: 'json',
      success: function(data) {
          console.log('成功:', data);
      },
      error: function(jqXHR, textStatus, errorThrown) {
          console.error('请求失败:', textStatus, errorThrown);
      }
  });
   2.  `$.get()` 

  `$.get()`  方法用于发起 GET 请求，简化了 Ajax 请求的语法。
  语法
  $.get(url, data, callback, dataType);
  示例
  $.get('https://api.example.com/data', { id: 1 }, function(data) {
      console.log('获取的数据:', data);
  }, 'json');
   3.  `$.post()` 

  `$.post()`  方法用于发起 POST 请求，简化了 Ajax 请求的语法。
  语法
  $.post(url, data, callback, dataType);
  示例
  $.post('https://api.example.com/submit', { name: '小明', age: 25 }, function(response) {
      console.log('提交结果:', response);
  }, 'json');
   4.  `$.getJSON()` 

  `$.getJSON()`  方法用于发起 GET 请求，并自动将响应解析为 JSON 格式。
  语法
  $.getJSON(url, data, callback);
  示例
  $.getJSON('https://api.example.com/data', { id: 1 }, function(data) {
      console.log('获取的 JSON 数据:', data);
  });
  二、Ajax 请求的常见选项

  - url：请求的 URL 地址。
  - type：请求方式，常用的有  `GET`  和  `POST` 。
  - data：发送到服务器的数据，可以是对象或字符串。
  - dataType：期望的响应数据类型，常用的有  `json` 、 `xml` 、 `html` 、 `text` 。
  - success：请求成功时的回调函数，接收响应数据作为参数。
  - error：请求失败时的回调函数，接收错误信息作为参数。
  - complete：请求完成时的回调函数，无论成功或失败都会被调用。

  三、总结
  - jQuery 提供了多种 Ajax 方法，如  `$.ajax()` 、 `$.get()` 、 `$.post()`  和  `$.getJSON()` ，方便开发者与服务器进行异步通信。
  - Ajax 请求可以配置多种选项，如请求 URL、请求方式、发送数据、期望响应数据类型等。
  - 通过回调函数处理请求的结果，支持成功、失败和完成的处理逻辑。
  -->
</head>
<body>

  <button>取消这个请求</button>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    $(function() {
      // 1. get请求
      $.get({
        url: 'http://httpbin.org/get',
        data: { id: 1 },
        timeout: 5000,  // 配置超时时间
        success: function(response) {
          console.log('获取的数据:', response);
        }
      });

      // 2. post请求
      $.post({
        url: 'http://httpbin.org/post',
        data: { id: 1 },
        timeout: 5000,  // 配置超时时间
        success: function(response) {
          console.log('获取的数据:', response)
        },
        error: function(xhr, status, error) {
          console.error('请求失败:', error);
        }
      });

      // 3. ajax请求
      $.ajax({
        url: 'http://httpbin.org/get',
        method: 'GET',
        data: { id: 1 },
        dataType: 'json',
        timeout: 5000,  // 配置超时时间
        success: function(response) {
          console.log('获取的数据:', response);
        },
        error: function(xhr, status, error) {
          console.error('请求失败:', error);
        },
        complete: function(xhr, status) {
          console.log('请求完成:', status);
        }
      });
    })

    // 4. put请求: 更新数据
    $.ajax({
      url: 'http://httpbin.org/put',
      method: 'PUT',
      data: { id: 1, name: '张三' },
      timeout: 5000,  // 配置超时时间
      success: function(response) {
        console.log('更新成功:', response);
      },
      error: function(xhr, status, error) {
        console.error('更新失败:', error)
      }
    })

    // 5. delete请求: 删除数据
    $.ajax({
      url: 'http://httpbin.org/delete',
      method: 'DELETE',
      data: { id: 1 },
      timeout: 5000,  // 配置超时时间
      success: function(response) {
        console.log('删除成功:', response)
      },
      error: function(xhr, status, error) {
        console.error('删除失败:', error)
      }
    })

    // 6. 取消请求
    let xhr = $.ajax({
      url: 'http://httpbin.org/delay/7',
      method: 'GET',
      timeout: 5000,  // 配置超时时间
      success: function(response) {
        console.log('获取的数据:', response);
      },
      error: function(xhr, status, error) {
        console.error('请求失败:', error);
      },
    })

    $('button').on('click', function() {
      xhr.abort();  // 取消请求
    })

  </script>
  
</body>
</html>